<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>23-综合案例二</title>
    <script src="../js/vue.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <!--操作行-->
    <el-row>
        <el-col :span="6">
            <el-button type="primary" icon="el-icon-plus" @click="addEmpPage">添加</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="DeleteMultiple">批量删除</el-button>
        </el-col>
        <el-col :span="6">
            <!--搜索框-->
            <el-input name="searchKeyWords" type="text" v-model="searchKeyWords">
                <!--前缀下拉菜单插槽-->
                <el-select v-model="searchType" slot="prepend">
                    <el-option name="searchType" label="员工编号" value="1"></el-option>
                    <el-option name="searchType" label="员工姓名" value="2"></el-option>
                    <el-option name="searchType" label="员工部门" value="3"></el-option>
                </el-select>
                <!--后缀搜索按钮-->
                <el-button type="info" icon="el-icon-search" slot="append" @click="searchBtn">搜索</el-button>
            </el-input>
        </el-col>
    </el-row>
    <p></p>

    <!--表格-->
    <el-table border :data="empData" @select-all="selectAllRow" @select="selectOneRow">
        <!--表格前两列-->
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column label="序号" type="index" align="center"></el-table-column>
        <!--表格数据列-->
        <el-table-column label="EMPNO" align="center" prop="EMPNO"></el-table-column>
        <el-table-column label="ENAME" align="center" prop="ENAME"></el-table-column>
        <el-table-column label="JOB" align="center" prop="JOB" :formatter="JOBFormat"></el-table-column>
        <el-table-column label="MGR" align="center" prop="MGR"></el-table-column>
        <el-table-column label="HIREDATE" align="center" prop="HIREDATE"></el-table-column>
        <el-table-column label="SAL" align="center" prop="SAL"></el-table-column>
        <el-table-column label="COMM" align="center" prop="COMM"></el-table-column>
        <el-table-column label="DEPTNO" align="center" prop="DEPTNO"></el-table-column>
        <!--表格操作列-->
        <el-table-column label="操作" align="center">
            <div slot-scope="scope">
                <el-button type="danger" icon="el-icon-delete" @click="deleteOneRowData(scope)">删除</el-button>
                <el-button type="warning" icon="el-icon-edit" @click="editEmpPage(scope)">编辑</el-button>
            </div>
        </el-table-column>
    </el-table>

    <!--分页组件-->
    <el-pagination
            :total="pageInfo.total"
            :current-page="pageInfo.pageNum"
            :page-size="pageInfo.pageSize"
            :page-sizes="pageInfo.sizes"
            layout="total,prev,pager,next,jumper,sizes">
    </el-pagination>

    <!--弹框-->
    <!--添加员工信息弹框-->
    <el-dialog :visible.sync="addEmpFlag" title="添加员工信息" @close="resetAddEmpForm">
        <el-form :model="addEmpObj" :rules="ruleRegs" ref="addEmpForm">
            <!--姓名-->
            <el-form-item label="姓名" label-width="70px" prop="ENAME">
                <el-input name="ENAME" type="text" prefix-icon="el-icon-user" v-model="addEmpObj.ENAME"></el-input>
            </el-form-item>
            <!--职位-->
            <el-form-item label="职位" label-width="70px">
                <el-select v-model="addEmpObj.JOB">
                    <el-option name="JOB" label="--请选择职位--" value="0"></el-option>
                    <el-option name="JOB" label="CLERK" value="1"></el-option>
                    <el-option name="JOB" label="SALESMAN" value="2"></el-option>
                    <el-option name="JOB" label="MANAGER" value="3"></el-option>
                    <el-option name="JOB" label="PRESIDENT" value="4"></el-option>
                    <el-option name="JOB" label="ANALYST" value="5"></el-option>
                </el-select>
            </el-form-item>
            <!--经理编号-->
            <el-form-item label="经理编号" label-width="70px">
                <el-input name="MGR" type="text" v-model="addEmpObj.MGR"></el-input>
            </el-form-item>
            <!--入职日期-->
            <el-form-item label="入职日期" label-width="70px">
                <el-date-picker name="HIREDATE" v-model="addEmpObj.HIREDATE"></el-date-picker>
            </el-form-item>
            <!--薪资-->
            <el-form-item label="薪资" label-width="70px" prop="SAL">
                <el-input name="SAL" type="text" prefix-icon="el-icon-money" v-model="addEmpObj.SAL"></el-input>
            </el-form-item>
            <!--奖金-->
            <el-form-item label="奖金" label-width="70px">
                <el-input name="COMM" type="text" prefix-icon="el-icon-money" v-model="addEmpObj.COMM"></el-input>
            </el-form-item>
            <!--部门编号-->
            <el-form-item label="部门编号" label-width="70px">
                <el-input name="DEPTNO" type="text" prefix-icon="el-icon-location-outline" v-model="addEmpObj.DEPTNO"></el-input>
            </el-form-item>
            <!--确认和取消按钮-->
            <el-form-item>
                <el-row type="flex" justify="center">
                    <el-col :span="6">
                        <el-button type="success" icon="el-icon-check" @click="submitAddEmpForm">确定</el-button>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="danger" icon="el-icon-close" @click="resetAddEmpForm">取消</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!--编辑员工信息弹框-->
    <el-dialog :visible.sync="editEmpFlag" title="编辑员工信息" @close="resetEditEmpForm">
        <el-form :model="editEmpObj" :rules="ruleRegs" ref="editEmpForm">
            <!--姓名-->
            <el-form-item label="姓名" label-width="70px" prop="ENAME">
                <el-input name="ENAME" type="text" prefix-icon="el-icon-user" v-model="editEmpObj.ENAME"></el-input>
            </el-form-item>
            <!--职位-->
            <el-form-item label="职位" label-width="70px">
                <el-select v-model="editEmpObj.JOB">
                    <el-option name="JOB" label="--请选择职位--" value="0"></el-option>
                    <el-option name="JOB" label="CLERK" value="1"></el-option>
                    <el-option name="JOB" label="SALESMAN" value="2"></el-option>
                    <el-option name="JOB" label="MANAGER" value="3"></el-option>
                    <el-option name="JOB" label="PRESIDENT" value="4"></el-option>
                    <el-option name="JOB" label="ANALYST" value="5"></el-option>
                </el-select>
            </el-form-item>
            <!--经理编号-->
            <el-form-item label="经理编号" label-width="70px">
                <el-input name="MGR" type="text" v-model="editEmpObj.MGR"></el-input>
            </el-form-item>
            <!--入职日期-->
            <el-form-item label="入职日期" label-width="70px">
                <el-date-picker name="HIREDATE" v-model="editEmpObj.HIREDATE"></el-date-picker>
            </el-form-item>
            <!--薪资-->
            <el-form-item label="薪资" label-width="70px" prop="SAL">
                <el-input name="SAL" type="text" prefix-icon="el-icon-money" v-model="editEmpObj.SAL"></el-input>
            </el-form-item>
            <!--奖金-->
            <el-form-item label="奖金" label-width="70px">
                <el-input name="COMM" type="text" prefix-icon="el-icon-money" v-model="editEmpObj.COMM"></el-input>
            </el-form-item>
            <!--部门编号-->
            <el-form-item label="部门编号" label-width="70px">
                <el-input name="DEPTNO" type="text" prefix-icon="el-icon-location-outline" v-model="editEmpObj.DEPTNO"></el-input>
            </el-form-item>
            <!--确认和取消按钮-->
            <el-form-item>
                <el-row type="flex" justify="center">
                    <el-col :span="6">
                        <el-button type="success" icon="el-icon-check" @click="submitEditEmpForm">确定</el-button>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="danger" icon="el-icon-close" @click="resetEditEmpForm">取消</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
<script src="../js/24-综合案例二.js"></script>
</body>
</html>